import * as React from "react";
import Breadcrumbs from "@material-ui/core/Breadcrumbs";
import Typography from "@material-ui/core/Typography";
import Link from "@material-ui/core/Link";
import {BaseProps} from "../../App";

interface AppBreadcrumbsProps extends BaseProps {
    onClick: Function;
    breadcrumbs: Array<{
        name: string; path: string
    }>
}

export class AppBreadcrumbs extends React.Component<AppBreadcrumbsProps> {
    render() {
        return <div>
            <Breadcrumbs aria-label="breadcrumb">
                {this.props.breadcrumbs.map((item, index) => {
                    if (index === this.props.breadcrumbs.length - 1) {
                        return (
                            <Typography key={index} variant={'body1'} color="textSecondary">{item.name}</Typography>);
                    } else {
                        return (<Link key={index} className={'link-href'} onClick={() => this.props.onClick(item.path)}
                                      underline={'none'} color={'textPrimary'}>{item.name}</Link>)
                    }
                })}
            </Breadcrumbs>
        </div>;
    }
}
